<template>
  <div>
    <!-- 顶部 标题 -->
    <van-nav-bar
      :title="isLogin ? '登录' : '注册'"
      left-arrow
      @click-left="router.replace('/home')"
    />
    <div class="container">
      <!-- 头像 -->
      <div class="user_img">
        <img src="https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg" alt="" />
      </div>
      <!-- 登录表单 -->

      <van-form @submit="onSubmit">
        <!-- 登录注册通用 -->
        <van-field
          v-model="userInfo.name"
          name="name"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="userInfo.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <!-- 仅注册用 -->
        <van-field
          v-if="!isLogin"
          v-model="userInfo.avatar"
          type="url"
          name="avatar"
          label="头像"
          placeholder="图片地址"
          disabled
          :rules="[{ required: true, message: '请填写图片地址' }]"
        />
        <van-field name="sex" label="性别" v-if="!isLogin">
          <template #input>
            <van-radio-group v-model="userInfo.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="!isLogin"
          v-model="userInfo.sign"
          type="text"
          name="sign"
          label="签名"
          placeholder="个性签名"
          :rules="[{ required: true, message: '请填写个性签名' }]"
        />
        <van-field
          v-if="!isLogin"
          v-model="userInfo.secretAnswer"
          type="text"
          name="secret_answer"
          label="密保"
          placeholder="密保问题"
          :rules="[{ required: true, message: '请填写密保' }]"
        />
        <div style="margin: 16px">
          <van-button
            class="loginBtn"
            round
            block
            type="primary"
            native-type="submit"
          >
            {{ isLogin ? "登录" : "注册" }}
          </van-button>
          <van-button
            round
            block
            :type="isLogin ? 'success' : 'default'"
            @click="isLogin = !isLogin"
          >
            {{ isLogin ? "注册" : "返回登录" }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getLoginInfo, register } from "@/api/user.js";
import { setToken } from "@/utils/token.js";
import { showNotify } from "vant";
import { useRouter } from "vue-router";
// 引入仓库
import useUserInfo from "@/store/useUserInfo";
import useCartInfo from "@/store/useCartInfo";

// 创建路由实例
let router = useRouter();
// 登录状态标识
let isLogin = ref(true);

let userInfo = ref({
  name: "",
  password: "",
  avatar: "https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg",
  sex: 1,
  sign: "",
  secretAnswer: "",
});
// 拿到仓库实例
let userStore = useUserInfo();
let cartStore = useCartInfo();

// 点击提交
let onSubmit = async (values) => {
  // 如果当前是登录状态
  if (isLogin.value) {
    // 登录逻辑
    getLoginInfo(values)
      .then((res) => {
        showNotify({ type: "success", message: "登录成功" });
        // 存储token 到cookie
        setToken(res.data.token, res.data.expire_in);
        // 存储个人信息到仓库
        userStore.setUserInfo({
          avatar: values.avatar, // 头像
          sex: values.sex, // 性别
          sign: values.sign, // 简介
          name: values.name, // 姓名
          password: values.password, // 密码
        });
        // 获取购物车信息 存储到购物车仓库
        cartStore.getCartInfo();
        // 跳转到首页
        router.replace("/home");
      })
      .catch(() => {
        userInfo.value.name = "";
        userInfo.value.password = "";
      });
  } else {
    // 注册逻辑
    let res = await register(values);
    // 如果返回的成功
    if (res.code === 1) {
      // 则改变当前登录 状态
      isLogin.value = true;
      // 并且把密码输入框清空  自己重新写密码 加强记忆
      userInfo.value.password = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  margin-top: 40px;

  .user_img {
    height: 100px;
    padding-top: 58px;
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  .loginBtn {
    margin-bottom: 10px;
  }

  .registerBtn {
    margin-top: 12px;
  }
}
</style>